import 'package:flutter/material.dart';

/// 2022年更新  适配 flutter 3.3.5 版本以上
/// 在业务开发中，开发者开发的业务中可能会用不到某一块的技术，但是小编建议，用不到的时候，可以顺便看看，当用到的时候就有足够的知识储备了，
/// 你可通会说，这会看了，时间长了就忘记了，小编要说的是，忘记不怕，你可以收藏或者关注我，当你忘记的时候，可以回来一看，小编会每周不定时更新内容
/// 每周必然会有更新，这是程序员的动力
class PageViewHomePage1 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _NavaHomePageState();
  }
}

class _NavaHomePageState extends State<PageViewHomePage1> {
  var imgUrlList = [
    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2019-07-02%2F5d1b27f8f0681.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670123599&t=60d8b41850e5f4e760de52b71345d5c4',
    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F8%2F57a7ef558b2e6.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670123599&t=41e25a2fa8f8d3939cbc73eb1d5af3f8',
    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F112420100954%2F201124100954-2-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670123599&t=20cbaa52562838069806724bdff692bb',
    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile.moyublog.com%2Fd%2Ffile%2F2021-02-08%2F3057a115a0e7684b71b066a99d95d749.jpg&refer=http%3A%2F%2Ffile.moyublog.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670123599&t=7f1c9b9e0adb970334acfaff4c7fa4c4',
    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2019-07-02%2F5d1b27f8f0681.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670123599&t=60d8b41850e5f4e760de52b71345d5c4',
    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F8%2F57a7ef558b2e6.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670123599&t=41e25a2fa8f8d3939cbc73eb1d5af3f8',
    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F112420100954%2F201124100954-2-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670123599&t=20cbaa52562838069806724bdff692bb',
    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile.moyublog.com%2Fd%2Ffile%2F2021-02-08%2F3057a115a0e7684b71b066a99d95d749.jpg&refer=http%3A%2F%2Ffile.moyublog.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670123599&t=7f1c9b9e0adb970334acfaff4c7fa4c4'
  ];
  late PageController _controller;
  var pageOffset = 0.0;
  var screenWidth = 0.0;

  @override
  void initState() {
    super.initState();
    _controller = PageController(initialPage: 0);
    // 監聽 PageController 的 Scroller 變化
    _controller.addListener(_offsetChanged);
  }

  void _offsetChanged() {
    // 每次的移動都重新計算對應的偏移值與特效
    setState(() {
      if(_controller.hasClients){
        if(_controller.offset!=null){
          pageOffset = _controller.offset / screenWidth;
        }
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    // 預設使用螢幕的寬度
    screenWidth = MediaQuery.of(context).size.width;
    return Scaffold(
        body: PageView.builder(
      controller: _controller,
      itemCount: imgUrlList.length,
      itemBuilder: (context, index) {
        // 計算每次異動時左邊的 Page 是哪個 index
        int  currentLeftPageIndex = pageOffset.floor();
        // 計算現在畫面 Offset 佔的比例
        num currentPageOffsetPercent = pageOffset - currentLeftPageIndex;
        // 加入移動的特效
        return Transform.translate(
          // 因爲是水平滑動，所以設定 offset 的 X 值，因爲 Page 固定不動
          // 所以要先用 pageOffset 減去 index 得到 負數
          // 如果是垂直滑動，請設定 offset 的 Y 值
          offset: Offset((pageOffset - index) * MediaQuery.of(context).size.width-10*(10-index), 0),
          // 加入調整透明度效果
          child: Opacity(
            // 如果現在左邊的 index 等於正要建立的 index，則讓它透明度變淡，因爲它要退出畫面了
            // 相反地是要顯示，則使用原本的 currentPageOffsetPercent
            opacity: currentLeftPageIndex == index
                ? 1 - currentPageOffsetPercent.toDouble()
                : currentPageOffsetPercent.toDouble(),
            child: Container(
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: NetworkImage(imgUrlList[index]),
                        fit: BoxFit.cover))),
          ),
        );
      },
    ));
    ;
  }
}
